<template>
	<view class="my_page padding20" :style="{'height':`calc(100vh - ${barHeight}px)`,'background-image': `url(${Http_url}/static/images/index_bg.png)`}">
		<view class="content bgWhite shadow">
			<view class="barbox shadow radius14 padding20 acea-row row-middle ">
				<view class="back blod600" @click="back">
					<text class="iconfont icon-zuo size12" style="padding-right: 10rpx;"></text>
					<text class="txt font_medium">返回</text>
				</view>
				<view class="title size18 font_bold blod600">我的邀请码</view>
				<view class="swith">
					<switch :checked="state==1" @change="stateChange" color="#FEA40B" style="transform:scale(0.7)"/>
					<text class="size12">会员注册</text>
				</view>
			</view>
			<view class="midbox paddingl20">
				<view class="txt paddingt20 margint20"><text class="yellow">·</text>方式1：复制链接，转发分享</view>
				<view class="copybox padding20 acea-row row-between-wrapper bgHui radius8">
					<view class="url ellipsis">{{shareUrl}}</view>
					<view class="btn radius6 bgYellow white" @click="copy">复制</view>
				</view>
				<view class="txt paddingt20 margint20"><text class="yellow">·</text>方式2：保存二维码，并转发分享</view>
				<view class="codebox radius14" :style="{'background-image': `url(${Http_url}/static/images/code_bg.png)`}">
					<view class="userinfo acea-row row-center-wrapper">
						<view class="avatar">
							<image :src="userInfo.wx_img"></image>
						</view>
						<view class="infobox">
							<view class="name font_medium blod500">{{userInfo.wx_name}}</view>
							<view class="size21 font_bold blod600">邀请您注册</view>
						</view>
					</view>
					<view class="codemid acea-row row-center-wrapper">
						<view class="code bgWhite">
							<!-- <image :src="PromotionCode"></image> -->
							<canvas canvas-id="qrcode" :style="{width: `${qrcodeSize}px`, height: `${qrcodeSize}px`}" />
						</view>
					</view>
				</view>				
			</view>
		</view>
	</view>	
</template>

<script>
	import { mapGetters } from "vuex";
	import uQRCode from '@/utils/uqrcode.js'
	import {Http_url} from '@/config/config.js'
	import {aduser_user_state} from '@/api/user.js'
	import store from '@/store'
	export default {
		computed: mapGetters(['isLogin','userInfo','globalData','uid']),
		data() {
			return {
                Http_url,
				vid:0,
				barHeight:0,
				// userInfo:{
				// 	avatar:'../../static/logo.png',
				// 	name:'杀手小冒',
				// 	type:1,//类型
				// 	phone:'18544573345',
				// 	level:'群主'
				// },
				shareUrl:'',
				qrcodeSize:200,
				PromotionCode:'',
				state:2,//1开启 2关闭
				userInfos:null
			};
		},
		created() {
			uni.setNavigationBarTitle({
				title: this.globalData.systemName
			});
		},
		onLoad(option) {
			if(!option){
				this.$util.Tips({
					title:err
				},{
					tab:3
				})
			}else{
				this.vid = option.id
				if(this.vid == null || this.vid == undefined){
					this.$util.Tips({
						title:'参数错误'
					},{
						tab:3
					})
				}else{
					this.userInfos = this.userInfo
					this.state = this.userInfos.is_user_zt
					this.barHeight=this.globalData.barHeight
					// this.shareUrl = Http_url+'/pages/video/index' + "?id=" + this.vid + "&qun_id=" + this.uid
					this.shareUrl = Http_url+'/pages/login/index' + "?id=" + this.vid + "&qun_id=" + this.uid
					this.make()
				}
			}
			
		},
		methods: {
			stateChange(e){
				let that=this
				that.state = e.detail.value ? 1:2
				aduser_user_state({state:that.state}).then(res=>{
					if(res.code == 900){
						that.userInfos.is_user_zt = that.state
						that.$store.commit("UPDATE_USERINFO_USER", JSON.parse(JSON.stringify(that.userInfos)));
						that.$util.Tips({
							title:'修改成功'
						})
					}
				})
			},
			back(){
				uni.navigateBack({
					delta: 1,
				})
			},
			copy(){
				let _this=this
				uni.setClipboardData({
					data: _this.shareUrl,
					success: function () {
						_this.$util.Tips({
							title:'复制成功'
						})
					}
				});
			},
			// 生成二维码；
			make() {
				// let href = '/pages/video/index' + "?id=" + this.vid + "&spread=" + this.uid;
				uQRCode.make({
					canvasId: 'qrcode',
					text: this.shareUrl,
					size: this.qrcodeSize,
					margin: 10,
					success: res => {
						// console.log('res',res)
						this.PromotionCode = res;
					},
					complete: () => {},
					fail: res => {
						this.$util.Tips({
							title: '二维码生成失败！'
						});
					}
				})
			},
			
		}
	}
</script>

<style lang="scss">
	.my_page{
		width: 100%;
		background-position: top;
		background-size: contain;
		background-repeat: no-repeat;
	}
	.content{
		height: calc(100% - -10rpx);
		border-top-left-radius: 14px;
		border-top-right-radius: 14px;
		.barbox{
			.title{	
				width: calc(100% - 340rpx);
				text-align: center;
			}
		}
		.midbox{
			.txt{
				
			}
			.copybox{
				.url{
					width: 80%;
				}
				.btn{
					padding: 10rpx 30rpx;
				}
			}
			.codebox{
				width: 100%;
				background-position: top;
				background-size: cover;
				background-repeat: no-repeat;
				padding: 80rpx 0 100rpx 0;
				
				.userinfo{
					width: 100%;
					.avatar{
						width: 116rpx;
						height: 116rpx;
						border: 4rpx solid #FFFFFF;
						border-radius: 50%;
						overflow: hidden;
					}
					.infobox{
						margin-left: 10rpx;
					}
				}
				.codemid{
					width: 100%;
					.code{
						width: 384rpx;
						height: 384rpx;
						margin-top: 80rpx;
					}
				}
			}
		}
	}
</style>
